// import QuestionInput from '@/components/QuestionComponents/QuestionInput'
// import QuestionRadio from '@/components/QuestionComponents/QuestionRadio'
// import Head from 'next/head'

import styles from '@/styles/Question.module.scss'
import PageWrapper from '@/components/PageWrapper'
import { getQuestionId } from '@/services/question'
import { getComponent } from '../../components/QuestionComponents/index'
import ComponentList from '../../../../src/pages/question/Stat/ComponentList'

interface PropsType {
  errno: number
  data?: {
    id: string
    title: string
    desc?: string
    js?: string
    css?: string
    isPublished: boolean
    isDeleted: boolean
    componentList: any[]
  }
  msg?: string
}

// app/question/[id].tsx
// http://localhost:3000/question/:id  C 端 H5 的 url 规则
export default function Question({ errno, data, msg }: PropsType) {
  // 数据错误
  if (errno !== 0) {
    return (
      <PageWrapper title="错误">
        <h1>错误</h1>
        <p>{msg}</p>
      </PageWrapper>
    )
  }
  const { id, title = '', isDeleted, desc = '', isPublished, componentList = [] } = data || {}
  // 已经被删除的错误
  if (isDeleted) {
    return (
      <PageWrapper title={title} desc={desc}>
        <h1>{title}</h1>
        <p>该问卷已经被删除</p>
      </PageWrapper>
    )
  }

  // 尚未发布的, 提示错误
  if (!isPublished) {
    return (
      <PageWrapper title={title} desc={desc}>
        <h1>{title}</h1>
        <p>该问卷尚未发布</p>
      </PageWrapper>
    )
  }

  // 遍历组件
  const ComponentListElem = (
    <>
      {componentList.map(c => {
        const ComponentElem = getComponent(c)

        return (
          <div key={c.fe_id} className={styles['component-wrapper']}>
            {ComponentElem}
          </div>
        )
      })}
    </>
  )
  return (
    <PageWrapper title={title} desc="question page">
      <form action="/api/answer" method="post">
        <input name="questionId" defaultValue={id} type="hidden" />
        {/* <div className={styles['component-wrapper']}>
          <QuestionInput fe_id="c1" props={{ title: '你的姓名', placeholder: '请输入...' }} />
        </div>
        <div className={styles['component-wrapper']}>
          <QuestionRadio
            fe_id="c2"
            props={{
              title: '性别',
              options: [
                { value: 'male', text: '男' },
                { value: 'female', text: '女' },
              ],
              value: 'male',
              isVertical: true,
            }}
          />
        </div> */}
        {ComponentListElem}
        <div className={styles['submit-btn-container']}>
          {/* <input type="submit" value="提交"></input> */}
          <button type="submit">提交</button>
        </div>
      </form>
    </PageWrapper>
  )
}

export async function getServerSideProps(context: any) {
  const { id } = context.params

  // 根据id await 获取问卷数据
  const data = await getQuestionId(id)
  console.log(data.data)

  return {
    props: data,
  }
}
